<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../static/css/index.css">
    <link rel="stylesheet" href="../../static/eui/element-ui.css">

    <script src="../../static/js/vue.min.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/eui/index.js"></script>

    <script src="../../static/js/App.js"></script>
    <script src="../../static/js/auth.js"></script>
    <script src="../../static/js/checkIsLogin.js"></script>
    <script src="../../static/js/RefreshComponent.js"></script>

    <style>
        body {
            font-size: 14px;
        }

        .smallImg {
            float: left;
            margin-right: 10px;
            width: 50px;
            height: 50px;
            position: relative;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div id="app">
    <refresh-comm></refresh-comm>
    <template>
        <!--搜索区域-->
        <el-form :model="ruleForm" :rules="rules"
                 ref="ruleForm" label-width="80px" class="seachClass">

            <el-form-item label="销售模式" prop="region">
                <el-radio-group v-model="ruleForm.productSaleModel" style="width: 190px;">
                    <el-radio v-for="item in productSaleModelData" :label="item.value">{{item.name}}</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="商品分类" prop="productTypeId">
                <el-select v-model="ruleForm.productTypeId" placeholder="--请选择--" style="width: 120px;">
                    <el-option key="0" value="0" label="全部"></el-option>
                    <el-option v-for="item in productTypeData"
                               :key="item.id"
                               :label="item.productTypeName"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商品标签" prop="productTagId">
                <el-select v-model="ruleForm.productTagId" placeholder="--请选择--" style="width: 100px;">
                    <el-option key="0" value="0" label="全部"></el-option>
                    <el-option v-for="item in productTagData"
                               :key="item.id"
                               :label="item.productTagName"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商品名称" prop="productName" style="width: 300px;">
                <el-input v-model="ruleForm.productName"></el-input>
            </el-form-item>

            <div style="margin-top:4px; margin-left: 10px; justify-content: flex-end;">
                <el-button v-loading="loading" size="small" type="primary" @click="searchData('ruleForm')"
                           icon="el-icon-search">搜索
                </el-button>
                <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
            </div>

        </el-form>
    </template>

    <div style="margin-top: 10px; display: flex;">

        <span style="width: 50%">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="add"></el-button>
            <el-button :disabled="multipleSelection.length<1?true:false" size="small" type="primary"
                       icon="el-icon-delete" @click="delSelectRowClick"></el-button>
        </span>
        <span style="width: 50%;display:flex;justify-content: flex-end;">
            <span style="margin-top: 8px;font-size: 12px; color: #606266;">共有[{{page.total}}]个商品 </span>
            <!--分页-->
            <el-pagination background layout="prev, pager, next"
                           :current-page="page.current"
                           :total="page.total"
                           @current-change="handleCurrentChange"
            ></el-pagination>
        </span>
    </div>


    <!--数据表区域-->
    <div v-loading="loading">
        <template>
            <el-table v-if="loading==false"
                      :data="tableData"
                      stripe
                      :height="App.getIfmAutoHeight()-15"
                      tooltip-effect="dark"
                      @selection-change="handleSelectionChange"
                      style="width: 100%">
                <el-table-column
                        fixed
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        sortable
                        prop="id"
                        label="编号"
                        width="80">
                </el-table-column>

                <!--<el-table-column  prop="product_create_time" sortable label="登记日期" width="100">-->
                <!--<template slot-scope="scope">-->
                <!--{{scope.row.product_create_time | formatDate}}-->
                <!--</template>-->
                <!--</el-table-column>-->

                <el-table-column
                        sortable
                        prop="product_type_name"
                        label="商品分类"
                        width="100">
                </el-table-column>

                <el-table-column prop="product_name_value" label="商品名称" width="320">
                    <template slot-scope="scope">
                        <div class="smallImg"
                             :style="{'backgroundImage': 'url(' + BASE_IMG_URL+scope.row.product_img_index_url + ')'}">
                        </div>
                        <div style="display: flex; flex-direction: column;">
                            <span>{{scope.row.product_name_value}}</span>
                            <el-badge :value="scope.row.saleModel"
                                      :type="scope.row.product_sale_model==1?'primary':'danger'"></el-badge>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                        sortable
                        prop="product_tag_name"
                        label="标签"
                        width="80">
                    <template slot-scope="scope">
                        <el-badge :value="scope.row.product_tag_name"
                                  :type="scope.row.product_tag_type"></el-badge>
                    </template>
                </el-table-column>

                <el-table-column prop="product_standards_value" sortable label="规格" width="100">
                    <template slot-scope="scope">{{scope.row.product_standards_value}}</template>
                </el-table-column>

                <el-table-column
                        sortable
                        prop="product_sale_price"
                        label="销售价(元)"
                        width="120">
                    <template slot-scope="scope">￥{{scope.row.product_sale_price}}</template>
                </el-table-column>
                <el-table-column
                        sortable
                        prop="product_market_price"
                        label="划线价(元)"
                        width="120">
                    <template slot-scope="scope">
                        <s style="color: #ee3c06;">￥{{scope.row.product_market_price}}</s>
                    </template>
                </el-table-column>
                <el-table-column
                        sortable
                        prop="product_cost_price"
                        label="成本价(元)"
                        width="120">
                    <template slot-scope="scope">￥{{scope.row.product_cost_price}}</template>
                </el-table-column>
                <el-table-column
                        prop="volume_unit"
                        label="单位"
                        width="100">
                </el-table-column>

                <el-table-column
                        sortable
                        prop="product_amount"
                        label="库存量"
                        width="100">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="160">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" size="mini">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)" size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
</body>

<script>

    var Main = {
        data() {
            return {

                baseApi: '',

                //数据加载控制
                loading: true,

                //商品分类
                productTypeData: [],

                //销售模式下拉数据源
                productSaleModelData: [],

                //标签
                productTagData: [],

                //搜索
                ruleForm: {
                    productSaleModel: null,
                    productTypeId: null,
                    productTagId: null,
                    productName: null
                },
                //搜索表单填写规则，没有就留空
                rules: {},

                //列表选项
                multipleSelection: [],

                //列表数据
                tableData: [],

                //列表数据分页
                page: {
                    current: 1
                },
            }

        },

        created: function () {
            //加载商品分类
            App.getBaseListApi(global_api_url + "productType", data => {
                this.productTypeData = data;
            });

            //加载枚举销售模式
            App.getEnumListApi(global_api_url + "productSaleModelEnum", data => {
                this.productSaleModelData = data;
            });

            //加载标签
            App.getBaseListApi(global_api_url + "productTag", data => {
                this.productTagData = data;
            });

            //商品
            this.getProductList();

        },

        filters: {
            /**
             * 时间格式化
             */
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return App.formatDate(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        },

        methods: {

            /**
             * 获取列表数据
             */
            getProductList: function () {
                this.loading = true;
                //搜索
                let searchData = App.jsonToParams(this.ruleForm);
                //apiURL
                let apiURL = global_api_url + "product/list?current=" + this.page.current + searchData;
                //搜索
                console.log("getProductList apiURL===>>", apiURL);
                //调用ajax取数据
                axios.get(apiURL).then(rs => {

                    console.log("getProductList==>", rs);

                    if (rs.data.code == 0) {
                        rs = rs.data;
                        //列表
                        this.tableData = rs.data.records;
                        //分页
                        this.page = {
                            current: rs.data.current,
                            pages: rs.data.pages,
                            size: rs.data.size,
                            total: rs.data.total
                        };
                        //加载完毕
                        this.loading = false;
                    } else {
                        this.$message.error("错误消息：" + rs.data.msg);
                    }
                }).catch(e => {
                    alert(e);
                });
            },

            /**
             * 删除操作
             */
            delProduct: function (idstr) {
                //apiURL
                let apiURL = global_api_url + "product?idList=" + idstr;
                //删除数据
                axios.delete(apiURL).then(rs => {
                    //处理结果
                    if (rs.data.code == 0) {
                        this.$message.success("删除成功！");
                        //让提示一会在加载数据
                        setTimeout(t => this.getProductList(), 1000);
                    } else {
                        this.$message.error("错误消息：" + rs.data.msg);
                    }
                }).catch(e => {
                    alert(e);
                });
            },

            /**
             * 分页点击某页
             */
            handleCurrentChange: function (current) {

                this.page.current = current;
                this.getProductList();

            },

            /**
             * 选择
             * @param val
             */
            handleSelectionChange: function (val) {
                this.multipleSelection = [];
                for (var row of val) {
                    this.multipleSelection.push(row.id);
                }
                console.log("选择  ids====>>>" + this.multipleSelection.toString());

            },

            /**
             * 删除选中的行记录
             */
            delSelectRowClick: function () {
                console.log("删除 ids====>>>" + this.multipleSelection.toString());

                this.delProduct(this.multipleSelection.toString());
            },

            /**
             * 编辑商品
             * @param row
             */
            handleEdit: function (row) {
                parent.app.addTab("编辑商品(编号：" + row.id + ")", "./product/form.html?id=" + row.id);

            },
            /**
             * 删除单个商品
             */
            handleDelete: function (row) {
                console.log(row);
                this.delProduct(row.id);
            },

            /**
             * 点击搜索
             * @param formName
             */
            searchData: function (formName) {
                var _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //分页归零
                        _this.page.current = 1;
                        //调用查询方法
                        _this.getProductList();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            resetForm: function (formName) {
                //this.$refs[formName].resetFields();
                this.ruleForm = {
                    productSaleModel: null,
                    productTypeId: null,
                    productTagId: null,
                    productName: null
                }
            },
            add: function () {
                parent.app.addTab("添加商品", "./product/form.html");
            }
        }
    }
    let Ctor = Vue.extend(Main);
    let app = new Ctor().$mount('#app');

    /**
     *  回车搜索
     * @param e
     */
    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //搜索
            app.searchData('ruleForm');
        }
    }
</script>
</html>